<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .clock {
                position: relative;
                width: 300px;
                height: 300px;
                margin: 200px auto;
                border: 1px solid #ccc;
                border-radius: 50%;
            }
            .second {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -2px;
                margin-top: -99px;
                /*transform: translate(-50%,-100%);*/
                width: 3px;
                height: 99px;
                background-color: #000;
                z-index: 88;
                animation: clock 60s steps(60);
                transform-origin: bottom;
            }
            .minute {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -3px;
                margin-top: -90px;
                /*transform: translate(-50%,-100%);*/
                width: 5px;
                height: 90px;
                background-color: #000cff;
                z-index: 77;
                transform-origin: bottom;
            }
            .hour {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -4px;
                margin-top: -66px;
                /*transform: translate(-50%,-100%);*/
                width: 8px;
                height: 66px;
                background-color: #00ffca;
                transform-origin: bottom;
            }
            /*@keyframes clock {*/
                /*0% {*/
                    /*transform: rotate(0deg);*/
                /*}*/
                /*100% {*/
                    /*transform: rotate(360deg);*/
                /*}*/
            /*}*/
        </style>
    </head>
    <body>
        <input type="button" value="按钮" id="btn"/>
        <div class="clock">
            <div class="second"></div>
            <div class="minute"></div>
            <div class="hour"></div>
            <div class="point"></div>
        </div>
        <script>
                var btn = document.querySelector('#btn');
                var second = document.querySelector('.second');
                var minute = document.querySelector('.minute');
                var hour = document.querySelector('.hour');
                clockMove(hour,minute,second);


            //封装时钟函数
            /*
            * 传入时针秒针分针三个元素
            * 必须写好HTML+CSS样式，三元素定位到归零重叠位置（00：00：00）
            * 本函数只提供实时指针逻辑
            * */
            function clockMove(hour,minute,second){
                //拿到实时时间
                var nowTime = new Date();
                var seconds = nowTime.getSeconds();
                var minutes = nowTime.getMinutes();
                var hours = nowTime.getHours();
                //注册动画
                var st = document.createElement('style');
                //秒针实时的位置
                var sTmp = 6*seconds;
                var ssTmp = sTmp+360;//秒针旋转一圈后的位置，以一圈为循环界限
                var secondFrames = '@keyframes secondClock{0% {transform: rotate('+sTmp+'deg);}100% {transform: rotate('+ssTmp+'deg);}} ';
                //分针实时的位置
                var mTmp = 6*minutes;
                var mmTmp = mTmp+360;
                var minuteFrames = '@keyframes minuteClock{0% {transform: rotate('+mTmp+'deg);}100% {transform: rotate('+mmTmp+'deg);}} ';
                //时针实时的位置
                var hTmp = 30*hours;
                var hhTmp = hTmp+360;
                var hourFrames = '@keyframes hourClock{0% {transform: rotate('+hTmp+'deg);}100% {transform: rotate('+hhTmp+'deg);}} ';
                console.log(hours);
                console.log(hhTmp);
                st.innerHTML = secondFrames+minuteFrames+hourFrames;
                var hd = document.querySelector('head');
                hd.appendChild(st);
                //给秒针指定动画函数
                second.style.position = 'absolute';
                second.style.animation = 'secondClock 60s infinite steps(60)';
                //给分针指定动画函数
                minute.style.position = 'absolute';
                minute.style.animation = 'minuteClock 3600s linear infinite';
                //给分针指定动画函数
                hour.style.position = 'absolute';
                hour.style.animation = 'hourClock 43200s linear infinite';
            }





        </script>
    </body>
</html>